<template>
<div>
  <el-form  ref="ruleForm"  class="demo-ruleForm">
  <el-form-item  style="width: 400px">
          <span slot="label">
      	<span style="font-size: 15px">名称（15字以内）</span>
        </span>
    <el-input v-model="form.stagename" maxlength="15"  show-word-limit></el-input>
  </el-form-item>
  <el-form-item>
    <span style="font-size: 15px">视频</span>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="/photo/upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :on-success="success"
      :multiple="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过200MB</div>
    </el-upload>
  </el-form-item>
</el-form>
  <div style="display:flex;align-items:center;justify-content:center">
  <el-button>取消添加</el-button>
  <el-button type="primary" @click="sub()">确认添加</el-button>
  </div>
</div>
</template>

<script>
export default {
  name: "addstage",
  props:["couid"],
  data() {
    return {
      fileList: [],
      form: {
        videoaddress:"",
        stagename:"",
        courseid:this.couid,
        stagequeue:0,
        id:0,

      }
    }
  },
  methods: {
    getIndex(value){
      this.stagequeue = value;
      console.log("--_--")
      console.log(this.stagequeue)
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    success(res) {
      this.form.videoaddress = res.data;
      console.log(this.form.videoaddress);
      this.$message.success('视频上传成功')
    },
    //上传文件让第二次覆盖第一的文件
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
      }
    },
    // sub:function () {
    //   console.log(this.form)
    //   var url="/stage";
    //     this.$axios.post(url,this.form)
    //       .then( (res)=> {
    //         if (res.data.code === 0) {
    //           this.$message({message:"添加成功！", type: 'success'})
    //           function myMessage() {
    //             location.reload(true);
    //           }
    //           setTimeout(myMessage, 1000);
    //
    //         }
    //         else {
    //           this.$message({message:"添加失败！", type: 'error'})
    //         }
    //       }).catch(function (error) {
    //       console.log(error);
    //     } );
    //   },
  }
}
</script>

<style scoped>

</style>
